'use client';

import { useState } from 'react';
import { useTheme, ThemeColor, themeColorConfig } from '../context/ThemeContext';

export default function ThemeSelector() {
  const { themeColor, setThemeColor } = useTheme();
  const [isOpen, setIsOpen] = useState(false);

  // 主题颜色选项
  const themeOptions: { color: ThemeColor; label: string }[] = [
    { color: 'orange', label: '橙色' },
    { color: 'blue', label: '蓝色' },
    { color: 'green', label: '绿色' },
    { color: 'purple', label: '紫色' },
    { color: 'red', label: '红色' },
  ];

  // 切换下拉菜单
  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };

  // 选择主题
  const handleSelectTheme = (color: ThemeColor) => {
    setThemeColor(color);
    setIsOpen(false);
  };

  return (
    <div className="relative">
      <button
        onClick={toggleDropdown}
        className="flex items-center space-x-1 text-white hover:text-primary-200 transition-colors"
        aria-expanded={isOpen}
        aria-haspopup="true"
      >
        <span>主题</span>
        <svg
          className={`w-5 h-5 transition-transform ${isOpen ? 'rotate-180' : ''}`}
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M19 9l-7 7-7-7"
          />
        </svg>
      </button>

      {isOpen && (
        <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
          {themeOptions.map((option) => (
            <button
              key={option.color}
              className={`flex items-center w-full px-4 py-2 text-sm ${
                themeColor === option.color
                  ? 'bg-primary-50 text-primary-600'
                  : 'text-gray-700 hover:bg-gray-100'
              }`}
              onClick={() => handleSelectTheme(option.color)}
            >
              <span
                className="inline-block w-4 h-4 rounded-full mr-2"
                style={{ backgroundColor: themeColorConfig[option.color].primary[500] }}
              ></span>
              {option.label}
              {themeColor === option.color && (
                <svg className="ml-auto w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
                  <path
                    fillRule="evenodd"
                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                    clipRule="evenodd"
                  />
                </svg>
              )}
            </button>
          ))}
        </div>
      )}
    </div>
  );
} 